#header {
  .site-header {
    position: relative;
    width: 100%;
    &::after {
      display: block;
      content: "";
      clear: both;
    }

    .tab-box {
      &::after {
        display: block;
        content: "";
        clear: both;
      }
      margin: 0 auto;
      width: 1226px;
      height: 100px;
      //   background-color: yellowgreen;
      > .logo {
        float: left;
        img {
          width: 56px;
          height: 56px;
          margin-top: 22px;
        }
      }
      > .list-box {
        &::after {
          display: block;
          content: "";
          clear: both;
        }
        float: left;
        width: 850px;
        .tab-list {
          &::after {
            display: block;
            content: "";
            clear: both;
          }
          float: left;
          list-style: none;
          width: 1100px;
          height: 88px;
          font-size: 16px;
          // background-color: yellowgreen;
          padding: 12px 0 0 30px;
          > .nav-category {
            position: relative;
            width: 127px;
            height: 88px;
            padding-right: 15px;
            float: left;
            &:hover {
              .product-category {
                display: block;
              }
            }
            /* ------------------------------------------------------------------------------ */
            /* ----site-categoryList----- */
            /* ---------------------------- */
            > .site-category {
              position: absolute;
              z-index: 10;
              top: 88px;
              left: -86px;
              width: 234px;
              height: 460px;
              background-color: rgba(105, 101, 101, 0.6);
              > .site_categoryList {
                list-style: none;
                padding: 20px 0;
                > .category-item {
                  position: relative;
                  &:hover {
                    > .item_box {
                      display: block;
                    }
                  }
                  > .item_box {
                    display: none;
                    position: absolute;
                    left: 234px;
                    // top: -20px;
                    z-index: 99;
                    height: 458px;
                    border: 1px solid #e0e0e0;
                    border-left: 0;
                    background: #fff;
                    -webkit-box-shadow: 0 8px 16px rgb(0 0 0 / 18%);
                    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.18);
                    .children-list {
                      float: left;
                      height: 458px;
                      margin: 0;
                      padding: 2px 0;
                      list-style-type: none;
                      width: 248px;
                      li {
                        position: relative;
                        // float: left;
                        width: 264px;
                        height: 76px;
                        > a {
                          display: block;
                          padding: 18px 20px;
                          line-height: 40px;
                          color: #333;
                          -webkit-transition: color 0.2s;
                          transition: color 0.2s;
                          &:hover {
                            .text {
                              color: #f6670f;
                            }
                          }
                          img {
                            width: 40px;
                            height: 40px;
                            float: left;
                            margin-right: 12px;
                            vertical-align: middle;
                          }
                          .text {
                            float: left;
                            width: 172px;
                            line-height: 40px;
                            white-space: nowrap;
                            text-overflow: ellipsis;
                            overflow: hidden;
                            color: #333;
                            font-size: 14px;
                          }
                        }
                      }
                    }
                  }
                  > a {
                    color: #fff;
                    position: relative;
                    display: block;
                    padding-left: 30px;
                    height: 42px;
                    line-height: 42px;
                    > i {
                      position: absolute;
                      right: 10px;
                      top: 0;
                    }
                    &:hover {
                      background-color: #f6670f;
                    }
                  }
                }
              }
            }
            > .product-category {
              position: absolute;
              display: none;
              z-index: 10;
              top: 88px;
              left: -86px;
              width: 234px;
              height: 460px;
              border: 1px solid #f6670f;
              background-color: #fff;
              > .site_categoryList {
                list-style: none;
                padding: 20px 0;
                > .category-item {
                  position: relative;
                  &:hover {
                    > a {
                      color: #fff;
                    }
                    > .item_box {
                      display: block;
                    }
                  }
                  > .item_box {
                    display: none;
                    position: absolute;
                    left: 234px;
                    // top: -20px;
                    z-index: 99;
                    height: 458px;
                    border: 1px solid #e0e0e0;
                    border-left: 0;
                    background: #fff;
                    -webkit-box-shadow: 0 8px 16px rgb(0 0 0 / 18%);
                    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.18);
                    .children-list {
                      float: left;
                      height: 458px;
                      margin: 0;
                      padding: 2px 0;
                      list-style-type: none;
                      width: 248px;
                      li {
                        position: relative;
                        // float: left;
                        width: 264px;
                        height: 76px;
                        > a {
                          display: block;
                          padding: 18px 20px;
                          line-height: 40px;
                          color: #333;
                          -webkit-transition: color 0.2s;
                          transition: color 0.2s;
                          &:hover {
                            .text {
                              color: #f6670f;
                            }
                          }
                          img {
                            width: 40px;
                            height: 40px;
                            float: left;
                            margin-right: 12px;
                            vertical-align: middle;
                          }
                          .text {
                            float: left;
                            width: 172px;
                            line-height: 40px;
                            white-space: nowrap;
                            text-overflow: ellipsis;
                            overflow: hidden;
                            color: #333;
                            font-size: 14px;
                          }
                        }
                      }
                    }
                  }
                  > a {
                    color: #000;
                    position: relative;
                    display: block;
                    padding-left: 30px;
                    height: 42px;
                    line-height: 42px;
                    > i {
                      position: absolute;
                      right: 10px;
                      top: 0;
                    }
                    &:hover {
                      background-color: #f6670f;
                    }
                  }
                }
              }
            }
          }

          > .nav-item {
            &::after {
              display: block;
              content: "";
              clear: both;
            }
            padding: 26px 10px 38px;
            float: left;
            &:hover {
              > a {
                color: #f6670f;
                transition: 0.2s;
              }

              // .item-children {
              //   height: 230px;
              // }
              // a {
              //   color: #f6670f;
              //   transition: 0.2s;
              // }
            }

            //--------------------------------------
            //----------item-children---------------
            //--------------------------------------
            > .item-children {
              position: absolute;
              left: 0;
              top: 100px;
              width: 100%;
              z-index: 99;
              overflow: hidden;
              height: 0;
              transition: height 0.3s;

              border-top: 1px solid #ccc;
              background-color: #fff;
              // box-shadow: 0 3px 4px rgba(0, 0, 0, 0.18);
              display: none;

              // .item-childrenH {
              //   height: 229px;
              // }
              a {
                color: #333;
                font-size: 10px;
                line-height: 20px;
              }
              > .child-container {
                margin: 0 auto;
                text-align: center;
                overflow: hidden;
                width: 1226px;
                height: 200px;
                margin-left: auto;
                margin-right: auto;
                font-size: 10px;
                > .children-list {
                  margin-top: 40px;
                  list-style: none;
                  > .first {
                    > a {
                      > .figure {
                        border: 0;
                      }
                    }
                  }
                  > li {
                    width: 204px;
                    box-sizing: border-box;
                    text-align: center;
                    float: left;
                    > a {
                      width: 100%;
                      padding-left: 0px;

                      > .figure {
                        border-left: 1px #ccc solid;
                      }
                      > p {
                        color: #f6670f;
                      }
                    }
                  }
                }
              }
            }

            > a {
              color: #333;
            }
          }
        }
      }
    }

    .header-search {
      position: relative;
      float: right;
      width: 296px;
      margin-top: 25px;
      .search-text {
        position: absolute;
        right: 51px;
        width: 232px;
        height: 48px;
        outline: 0;
        border: 1px solid #e0e0e0;
        padding-left: 5px;
      }
      .search-btn {
        width: 52px;
        height: 50px;
        position: absolute;
        right: 0;
        top: 0;
        border: 1px solid #e0e0e0;
        outline: 0;
        background-color: #fff;
        -webkit-transition: all 0.2s;
        cursor: pointer;
        transition: all 0.2s;
        &:hover {
          background-color: #f6670f;
        }
      }
    }
  }
}
.children-col4 {
  width: 992px;
}
.children-col3 {
  width: 744px;
}
.children-col2 {
  width: 496px;
}
.i1 {
  top: -20px;
}
.i2 {
  top: -62px;
}
.i3 {
  top: -104px;
}
.i4 {
  top: -146px;
}
.i5 {
  top: -188px;
}
.i6 {
  top: -230px;
}
.i7 {
  top: -272px;
}
.i8 {
  top: -314px;
}
.i9 {
  top: -356px;
}
.i10 {
  top: -398px;
}
